- page_title _('Update password')

.gl-ml-auto.gl-mr-auto{ class: '@sm/panel:gl-w-1/2' }

  %h1.gl-heading-1= _('Update password for %{current_name}') % { current_name: current_user.name }
  %p.gl-text-subtle
    = _("To continue, please update your password. After you update, you'll be directed to sign in again.")
  .info-well
    .well-segment
      .gl-flex.gl-items-center
        = render Pajamas::AvatarComponent.new(current_user, size: 24, avatar_options: { data: { qa_selector: 'user_avatar_content' }, title: current_user.username })
        .gl-pl-4.gl-break-all
          %span= _('Signed in as %{username}') % { username: '@' + current_user.username }
  = gitlab_ui_form_for @user, url: user_settings_password_path, method: :post do |f|

    = form_errors(@user)

    - unless @user.password_automatically_set?
      .form-group
        = f.label :password, _('Current password')
        = f.password_field :password, required: true, autocomplete: 'current-password', class: 'form-control gl-form-input', data: { testid: 'current-password-field' }
    .form-group
      = f.label :new_password, _('New password')
      = f.password_field :new_password, required: true, autocomplete: 'new-password', class: 'form-control gl-form-input js-password-complexity-validation', data: { testid: 'new-password-field' }
      = render_if_exists 'shared/password_requirements_list'
    .form-group
      = f.label :password_confirmation, _('Confirm password')
      = f.password_field :password_confirmation, required: true, autocomplete: 'new-password', class: 'form-control gl-form-input', data: { testid: 'confirm-password-field' }
    .gl-mt-3.gl-mb-3
      = f.submit _('Update password'), class: "gl-mr-3", data: { testid: 'set-new-password-button' }, pajamas_button: true
      = render Pajamas::ButtonComponent.new(href: '/users/sign_out', method: :post) do
        = _('Sign out')
